<template>
	<view class="wrapper">
		<view class="user_box center space-between" v-for="(val, index) in pageData" :key="index">
			<dimg :src="val.from | avatar" mode="aspectFill" class="avatar_box"></dimg>
			<view class="user_info flex">
				<view class="f28 user_name">{{ val.toNickname }}</view>
				<view class="f22 c999">{{ val.type | type(val.content) }}</view>
			</view>
			<view class="btn_box center" v-if="val.status!=2">
				<view type="default" class="cfff f28 center" v-if="val.type != 510" @tap.stop="friendsAdd(val.toUserId)">通过验证</view>
				<view type="default" class="c666 f28 center" @tap.stop="changeAlert(val.toUserId,val.toNickname)">回话</view>
			</view>
		</view>
		<alert alertTitle="回话" showInput="true" showCancel="false" @alertConfirm="alertConfirm" v-if="showAlert"></alert>
	</view>
</template>

<script>
import WEBIM from '@/common/webim.js';
import alert from '../../components/alert/alert.vue';
export default {
	data() {
		return {
			showAlert: false,
			pageData: [],
			toUserId:'',
			toNickname:''
		};
	},
	onShow() {
		uni.removeStorageSync('newList')
		this.getList();
	},
	onLoad() {},
	methods: {
		friendsAdd(toUserId) {
			this.$ajax(this.apiList.friendsAdd, {
				toUserId: toUserId
			}).then(res => {
				this.$sToast('成功加为好友');
				this.getList();
			});
		},
		getList() {
			this.$ajax(
				this.apiList.newFriendListWeb,
				{
					userId: uni.getStorageSync('userinfo').userId,
					pageIndex: 0,
					pageSize: 200
				},
				'POST'
			).then(res => {
				this.pageData = res.data.pageData;
			});
		},
		alertConfirm(type,text) {
			if(type==1){
				var msg = WEBIM.createMessage(1, text, this.toUserId, this.toNickname, 'chat');
				msg.id = msg.messageId;
				WEBIM.sendMessage(msg);
				this.$sToast('已回话')
			}
			this.changeAlert();
		},
		changeAlert(toUserId,toNickname) {
			this.toUserId=toUserId
			this.toNickname=toNickname
			this.showAlert = !this.showAlert;
		}
	},
	filters: {
		type(value, content) {
			if (value == 510) {
				return '已互为好友';
			} else if (value == 502||value==500) {
				return content;
			} else if (value == 505) {
				return '被取消了好友';
			}
		}
	},
	components: { alert }
};
</script>

<style lang="scss">
.user_box {
	padding: 19rpx 20rpx;
	.btn_box {
		.c666 {
			background: #e0e0e0;
			margin-left: 14rpx;
		}
		.cfff {
			background: #0297fe;
		}
		view {
			width: 160rpx;
			height: 65rpx;
			border-radius: 4rpx;
		}
	}
	.user_name {
		margin-bottom: 10rpx;
	}
	.avatar_box {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
		margin-right: 21rpx;
		overflow: hidden;
	}
}
</style>
